import React, { Component } from 'react'
import Taro from '@tarojs/taro'
import { connect } from 'react-redux';
import { newActivity, clearStoreAndTime } from '@redux/actions'
import { ScrollView, View, Text, Image, Switch, Picker, Input } from '@tarojs/components'
import imgList from '@components/imgList'
import dayjs, { dateDistance } from '@src/utils/dateTimeUtil'
import { fieldImg } from '@components/imgList'

import './index.scss'

class NewActivity extends Component {
  constructor(props) {
    super(props)
    this.state = {
      playerMode: [
        {
          key: '3',
          value: '3 V 3'
        },
        {
          key: '4',
          value: '4 V 4'
        },
        {
          key: '5',
          value: '5 V 5'
        },
        {
          key: '6',
          value: '6 V 6'
        },
        {
          key: '7',
          value: '7 V 7'
        },
        {
          key: '8',
          value: '8 V 8'
        },
        {
          key: '9',
          value: '9 V 9'
        },
        {
          key: '10',
          value: '10 V 10'
        },
        {
          key: '11',
          value: '11 V 11'
        },
      ]
    }
  }
  
  componentWillReceiveProps (nextProps) {
    console.log(this.props, nextProps)
  }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  handleNewActivity = () =>{
    const { playerMode = [], selectedModeKey, usePassword=false, password='', passwordFcous } =  this.state
    const { gameTime, currentStore } = this.props.store || {}
    if(!gameTime) return Taro.showToast({title: '请选择一个场次',icon: 'none'})
    if(!selectedModeKey) return Taro.showToast({title: '请选择参与人数',icon: 'none'})
    if(usePassword && (!password || password.length < 5)) return Taro.showToast({title: '请输入活动口令',icon: 'none'})
    if(this.props.newActivity){
      this.props.newActivity({
        id: Math.random(),  
        type: '小聚场',
        site: currentStore.name,
        status: '组队中',
        progress: `1/${parseInt(playerMode[selectedModeKey].key) * 2}`,
        time: `${dayjs(gameTime.game.date).format('MM-DD')} ${gameTime.game.start}-${gameTime.game.end}`,
        tags: [`${playerMode[selectedModeKey].key}人制`, gameTime.field.name],
        password: password ? password.substring(0, 5) : ''
      })
      Taro.navigateBack({delta: 1})
      this.props.clearStoreAndTime()
    }
  }

  /**
   * 参与人数选择
   */
  onPlayerModeChange = ({detail}) =>{
    this.setState({selectedModeKey: detail.value})
  }

  /**
   * 是否设置活动口令
   */
  toggleUsePassword = ({detail}) =>{
    this.setState({usePassword: detail.value, passwordFcous: detail.value })
  }

  /**
   * 口令输入
   */
  passwordChange = ({detail}) =>{
    
    this.setState({password: detail.value, passwordFcous: detail.value.length < 5 })
  }

  /**
   * 跳转选择球场
   */
  handleChoseStore = () =>{
    Taro.navigateTo({url: '../stores/index'})
  }

  render () {
    const { playerMode = [], selectedModeKey, usePassword=false, password='', passwordFcous } =  this.state
    const { gameTime, currentStore } = this.props.store || {}
    return (
      <ScrollView className='pageContent' enableFlex scrollY>
        <Text className='title'>准备好发起邀约了吗？</Text>
        <Text className='title'>我们会引导您完成这个过程</Text>
        <View className='parkCard'>
          {
            gameTime ? <>
              <Image onClick={this.handleChoseStore} style={{width: '100%',height: '100%'}} mode='aspectFit' src={fieldImg[gameTime.field.size]}/>
              <View className='bottom'>
                <View>{`${dateDistance(gameTime.game.date,'MM-DD')} ${gameTime.game.start}-${gameTime.game.end}`}</View>
                <View>{`${currentStore.name} ${gameTime.field.name}`}</View>
              </View>
            </>
            : <>
              <View className='btn' onClick={() =>this.handleChoseStore()}/>
              <Text>选择一个场次，我们场上见！</Text>
            </>
            
          }
          
        </View>
        
        <Picker style={{width: '100%'}} mode='selector' 
          range={ playerMode } rangeKey='value'
          onChange={this.onPlayerModeChange}>
          <View className='setCard'>
            <View>
              <Text className='required'>*</Text>
              <Text>参与人数规格</Text>
            </View>
            <View className='rightText'>
                {
                  selectedModeKey ? 
                  <Text style={{color: 'rgba(51,51,51,1)'}}>{playerMode[selectedModeKey].value}</Text>
                  :
                  <Text>请选择</Text>
                }
                
                <Image className='rightIcon' src={imgList.rightIcon}></Image>
            </View>
          </View>
        </Picker>

        <View className='setCard'>
          <View>
            <Text className='required'>*</Text>
            <Text>设置活动口令</Text>
          </View>
          <Switch checked={usePassword} onChange={this.toggleUsePassword}></Switch>
        </View>
        {
          usePassword &&
          <>
          <View className="passwordCard" onClick={() => this.setState({passwordFcous: true})}>
            {
              new Array(5).fill(0).map((item, index) => 
              <View key={`pitem${index}`} className="item">
                { password.length >= index - 1 ? password[index] : ''}
              </View>)
            }
          </View>
          <Input confirmType='done' style={{width:0,height:0}} type='number' onBlur={() => this.setState({passwordFcous: false})} 
            focus={passwordFcous} value={password} maxlength={5} onInput={this.passwordChange}/>
          </>
        }
        <View className='addBtn' onClick={this.handleNewActivity}>发起活动</View>
      </ScrollView>
    )
  }
}

export default connect(({activity, store}) => ({activity, store}),{newActivity, clearStoreAndTime})(NewActivity)

